<template>
  <div>
    <el-tabs v-model="activeName" type="card">
      <el-tab-pane :key="'first'" label="团支部年度工作计划" name="first">
        <el-form
          :inline="true"
          class="demo-form-inline"
          style="margin: 0 auto; width: 90%; padding-top: 20px"
        >
          <el-form-item label="年级:">
            <el-select v-model="firstGrade" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.grade"
                :label="item.grade"
                :value="item.grade"
              />
            </el-select>
          </el-form-item>

          <el-form-item label="班级:">
            <el-select v-model="firstClass" placeholder="请选择">
              <el-option
                v-for="item in firstOption.classes"
                :key="item"
                :label="item"
                :value="item"
              />
            </el-select>
          </el-form-item>

          <el-form-item label="年份:">
            <el-select v-model="firstYear" placeholder="请选择">
              <el-option
                v-for="item in firstOption.years"
                :key="item"
                :label="item"
                :value="item"
              />
            </el-select>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="firstSearch">查询</el-button>
          </el-form-item>
        </el-form>

        <table class="table-title" cellspacing="0" cellpadding="0">
          <tr>
            <td class="table-title-words">
              工作主题/工作时间/参与对象/效果目标
            </td>
          </tr>
        </table>
        <div
          style="
            width: 700px;
            margin-left: 160px;
            padding-top: 20px;
            padding-left: 10px;
            padding-right: 10px;
          "
        >
          <!--水平居中-->
          <!--width: 800px;margin-left: 220px;margin-right:150px;padding-top:20px;padding-left: 60px-->
          <el-form ref="form" :model="form" label-width="80px">
            <el-form-item label="Jan">
              <el-input
                v-model="form.Jan"
                type="textarea"
                :readonly="true"
                style="width: 600px"
                :autosize="{ minRows: 6 }"
              />
            </el-form-item>
            <el-form-item label="Feb">
              <el-input
                v-model="form.Feb"
                type="textarea"
                :readonly="true"
                style="width: 600px"
                :autosize="{ minRows: 6 }"
              />
            </el-form-item>
            <el-form-item label="Mar">
              <el-input
                v-model="form.Mar"
                type="textarea"
                :readonly="true"
                style="width: 600px"
                :autosize="{ minRows: 6 }"
              />
            </el-form-item>
            <el-form-item label="Apr">
              <el-input
                v-model="form.Apr"
                type="textarea"
                :readonly="true"
                style="width: 600px"
                :autosize="{ minRows: 6 }"
              />
            </el-form-item>
            <el-form-item label="May">
              <el-input
                v-model="form.May"
                type="textarea"
                :readonly="true"
                style="width: 600px"
                :autosize="{ minRows: 6 }"
              />
            </el-form-item>
            <el-form-item label="Jun">
              <el-input
                v-model="form.Jun"
                type="textarea"
                :readonly="true"
                style="width: 600px"
                :autosize="{ minRows: 6 }"
              />
            </el-form-item>
            <el-form-item label="Jul">
              <el-input
                v-model="form.Jul"
                type="textarea"
                :readonly="true"
                style="width: 600px"
                :autosize="{ minRows: 6 }"
              />
            </el-form-item>
            <el-form-item label="Aug">
              <el-input
                v-model="form.Aug"
                type="textarea"
                :readonly="true"
                style="width: 600px"
                :autosize="{ minRows: 6 }"
              />
            </el-form-item>
            <el-form-item label="Sep">
              <el-input
                v-model="form.Sep"
                type="textarea"
                :readonly="true"
                style="width: 600px"
                :autosize="{ minRows: 6 }"
              />
            </el-form-item>
            <el-form-item label="Oct">
              <el-input
                v-model="form.Oct"
                type="textarea"
                :readonly="true"
                style="width: 600px"
                :autosize="{ minRows: 6 }"
              />
            </el-form-item>
            <el-form-item label="Nov">
              <el-input
                v-model="form.Nov"
                type="textarea"
                :readonly="true"
                style="width: 600px"
                :autosize="{ minRows: 6 }"
              />
            </el-form-item>
            <el-form-item label="Dec">
              <el-input
                v-model="form.Dec"
                type="textarea"
                :readonly="true"
                style="width: 600px"
                :autosize="{ minRows: 6 }"
              />
            </el-form-item>
            <el-form-item label="另设">
              <el-input
                v-model="form.Others"
                type="textarea"
                :readonly="true"
                style="width: 600px"
                :autosize="{ minRows: 6 }"
              />
            </el-form-item>
          </el-form>
        </div>
      </el-tab-pane>

      <el-tab-pane :key="'second'" label="注册团员统计-班级对比" name="second">
        <el-form
          :inline="true"
          class="demo-form-inline"
          style="margin: 0 auto; width: 90%"
        >
          <el-form-item label="年级:">
            <el-select v-model="secondGrade" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.grade"
                :label="item.grade"
                :value="item.grade"
              />
            </el-select>
          </el-form-item>

          <el-form-item label="年份:">
            <el-select v-model="secondYear" placeholder="请选择">
              <el-option
                v-for="item in secondOption.years"
                :key="item"
                :label="item"
                :value="item"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="secondSearch">查询</el-button>
          </el-form-item>
        </el-form>
        <div id="GradeChart" style="width: 1000px; height: 400px" />
      </el-tab-pane>

      <el-tab-pane :key="'third'" label="注册团员统计-历年数据" name="third">
        <el-form
          :inline="true"
          class="demo-form-inline"
          style="margin: 0 auto; width: 90%; padding-top: 20px"
        >
          <el-form-item label="年级:">
            <el-select v-model="thirdGrade" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.grade"
                :label="item.grade"
                :value="item.grade"
              />
            </el-select>
          </el-form-item>

          <el-form-item label="班级:">
            <el-select v-model="thirdClass" placeholder="请选择">
              <el-option
                v-for="item in thirdOption.classes"
                :key="item"
                :label="item"
                :value="item"
              />
            </el-select>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="thirdSearch">查询</el-button>
          </el-form-item>
        </el-form>
        <div id="ClassChart" style="width: 1000px; height: 400px" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { getGradeClassesYears } from '@/api/gradeClassesYears'
import { getMonthlyPlan } from '@/api/part1/monthlyPlan'
import { getOtherSet } from '@/api/part1/otherset'
import { getGradeMembership, getHistoryMembership } from '@/api/part1/membership'
export default {
  name: '',
  components: {},
  data() {
    return {
      // 默认第一个选项卡
      activeName: 'first',
      form: {
        Jan: '',
        Feb: '',
        Mar: '',
        Apr: '',
        May: '',
        Jun: '',
        Jul: '',
        Aug: '',
        Sep: '',
        Oct: '',
        Nov: '',
        Dec: '',
        Others: ''
      },
      options: [
        {
          grade: 2017,
          classes: [
            '软件工程1班',
            '软件工程2班',
            '软件工程3班',
            '软件工程4班',
            '软件工程5班',
            '软件工程6班',
            '软件工程7班',
            '软件工程8班',
            'Ai',
            '大数据',
            '数字媒体'
          ],
          years: [2017, 2018, 2019, 2020]
        },
        {
          grade: 2018,
          classes: [
            '软件工程1班',
            '软件工程2班',
            '软件工程3班',
            '软件工程4班',
            '软件工程5班',
            '软件工程6班',
            '软件工程7班',
            '软件工程8班',
            'Ai',
            '大数据',
            '数字媒体'
          ],
          years: [2018, 2019, 2020]
        },
        {
          grade: 2019,
          classes: [
            '软件工程1班',
            '软件工程2班',
            '软件工程3班',
            '软件工程4班',
            '软件工程5班',
            '软件工程6班',
            '软件工程7班',
            '软件工程8班',
            'Ai',
            '大数据',
            '数字媒体'
          ],
          years: [2019, 2020]
        },
        {
          grade: 2020,
          classes: [
            '软件工程1班',
            '软件工程2班',
            '软件工程3班',
            '软件工程4班',
            '软件工程5班',
            '软件工程6班',
            '软件工程7班',
            '软件工程8班',
            'Ai',
            '大数据',
            '数字媒体'
          ],
          years: [2020]
        }
      ],
      firstGrade: 2017,
      firstClass: '软件工程1班',
      firstYear: 2020,
      firstOption: {
        grade: 2017,
        classes: [
          '软件工程1班',
          '软件工程2班',
          '软件工程3班',
          '软件工程4班',
          '软件工程5班',
          '软件工程6班',
          '软件工程7班',
          '软件工程8班',
          'Ai',
          '大数据',
          '数字媒体'
        ],
        years: [2017, 2018, 2019, 2020]
      },
      secondGrade: 2017,
      secondYear: 2020,
      secondOption: {
        grade: 2017,
        classes: [
          '软件工程1班',
          '软件工程2班',
          '软件工程3班',
          '软件工程4班',
          '软件工程5班',
          '软件工程6班',
          '软件工程7班',
          '软件工程8班',
          'Ai',
          '大数据',
          '数字媒体'
        ],
        years: [2017, 2018, 2019, 2020]
      },
      gradeData: [],
      thirdGrade: 2017,
      thirdClass: '软件工程1班',
      classData: [],
      thirdOption: {
        grade: 2017,
        classes: [
          '软件工程1班',
          '软件工程2班',
          '软件工程3班',
          '软件工程4班',
          '软件工程5班',
          '软件工程6班',
          '软件工程7班',
          '软件工程8班',
          'Ai',
          '大数据',
          '数字媒体'
        ]
      }
    }
  },
  watch: {
    firstGrade: function (val) {
      this.firstOption = this.options.find(function (x) { return x.grade === val })
      this.firstYear = this.firstOption.years[0]
      this.firstClass = this.firstOption.classes[0]
    },
    secondGrade: function (val) {
      this.secondOption = this.options.find(function (x) { return x.grade === val })
      this.secondYear = this.secondOption.years[0]
    },
    thirdGrade: function (val) {
      this.thirdOption = this.options.find(function (x) { return x.grade === val })
      this.thirdClass = this.thirdOption.classes[0]
    }
  },
  beforeCreate() { },
  created() {
    // 获取对应年级班级和年份信息
    getGradeClassesYears().then(response => {
      this.options = response.data.options;
      // 初始化first
      this.firstGrade = this.options[0].grade
      this.secondGrade = this.options[0].grade
      this.thirdGrade = this.options[0].grade
      this.firstSearch()
      this.secondSearch()
      this.thirdSearch()
      this.drawGradeChart()
      this.drawClassChart()
    }).catch(response => {
      console.log(response)
    })
  },
  beforeMount() { },
  mounted() {

  },

  beforeUpdate() { },
  updated() { },
  destoried() { },
  methods: {
    firstSearch() {
      const temp = this.firstGrade + '级' + this.firstClass + '团支部'
      console.log(temp)
      const data = {
        user: temp,
        year: this.firstYear
      }
      getMonthlyPlan(data).then(response => {
        console.log(response.data)
        const temp = response.data
        this.form.Jan = temp[0]
        this.form.Feb = temp[1]
        this.form.Mar = temp[2]
        this.form.Apr = temp[3]
        this.form.May = temp[4]
        this.form.Jun = temp[5]
        this.form.Jul = temp[6]
        this.form.Aug = temp[7]
        this.form.Sep = temp[8]
        this.form.Oct = temp[9]
        this.form.Nov = temp[10]
        this.form.Dec = temp[11]
      }).catch(err => {
        console.log(err)
      })

      getOtherSet(data).then(response => {
        this.form.Others = response.data
      }).catch(err => {
        console.log(err)
      })
    },
    secondSearch() {
      const data = {
        grade: this.secondGrade,
        year: this.secondYear
      }
      getGradeMembership(data).then(response => {
        this.gradeData = response.data
        this.drawGradeChart()
      }).catch(err => {
        console.log(err)
      })
    },
    thirdSearch() {
      const temp = this.thirdGrade + '级' + this.thirdClass + '团支部'
      const data = { user: temp }
      getHistoryMembership(data).then(response => {
        this.classData = response.data.data
        this.drawClassChart()
      }).catch(err => {
        console.log(err)
      })
    },
    drawGradeChart() {
      const classes = this.gradeData.map(x => { return x.class })
      const numbers = this.gradeData.map(x => { return x.list.length }) // 生成数组
      const title = this.secondGrade + '级各团支部团员人数对比'

      // 基于准备好的dom，初始化echarts实例
      const GradeChart = this.$echarts.init(document.getElementById('GradeChart'))
      // 绘制图表
      GradeChart.setOption({
        title: {
          text: title,
          left: 'center',
          color: '#fffff'
        },
        tooltip: {},
        xAxis: {
          data: classes,
          axisLabel: {
            interval: 0,
            rotate: 45, // 倾斜度 -90 至 90 默认为0
            margin: 11,
            textStyle: {
              color: '#fffff'
            }
          }
        },
        yAxis: {
          minInterval: 1
        },
        series: [{
          name: '团支部人数',
          type: 'bar',
          data: numbers,
          barWidth: 30, // 柱图宽度
          itemStyle: {
            normal: {
              color: function (params) {
                var colorList = ['#1890ff']
                return colorList[params.dataIndex % colorList.length]
              }
            }
          }
        }
        ]
      })
    },
    drawClassChart() {
      this.classData = Array.from(this.classData)
      const years = this.classData.map(x => { return x.year })
      const numbers = this.classData.map(x => { return x.list.length }) // 生成数组
      const title = this.thirdGrade + '级' + this.thirdClass + '团支部人数历史数据'

      const classChart = this.$echarts.init(document.getElementById('ClassChart'))

      classChart.setOption({
        title: {
          text: title,
          left: 'center',
          color: '#fffff'
        },
        xAxis: {
          type: 'category',
          data: years
        },
        yAxis: {
          type: 'value',
          minInterval: 1
        },
        series: [{
          data: numbers,
          type: 'line',
          name: '群众性体育活动次数',
          itemStyle: {
            normal: {
              lineStyle: {
                color: '#1890ff'
              }
            }
          }
        }]
      })
    }
  }
}
</script>

<style>
.table-title {
  border: 0;
  margin: 10px auto;
  width: 800px;
  text-align: center;
}

.table-title-words {
  text-align: center;
  height: 60px;
  font-size: 26px;
  font-weight: bold;
  color: #255e95;
}
</style>
